<template>
  <div class="main">
    <div class="main-title">
      <img src="/chuneng/img/title-border-i.png" />
      <!-- <div style="text-align: center">
        <svg viewBoxs="0 0 900 300" style="width: 600px">
          <defs>
            <linearGradient
              id="SVGID_1_"
              gradientUnits="userSpaceOnUse"
              x1="0"
              y1="0"
              x2="0"
              y2="90"
            >
              <stop offset="0" style="stop-color: #ffffff" />
              <stop offset="0.9" style="stop-color: #6bdbfa" />
              <stop offset="1" style="stop-color: #6bdbfa" />
            </linearGradient>
          </defs>
          <text
            style="fill: url(#SVGID_1_); font-size: 40px; font-weight: bolder"
            text-anchor="middle"
            x="50%"
            y="50%"
          >
            分布式储能在线监测与评估平台
          </text>
        </svg>
      </div> -->
      <!-- 使用封装的cnsvg组件 -->
      <cn-svg :viewbox="'0 0 900 300'" :svgstyle="'width: 600px;'" :textname="'分布式储能在线监测与评估平台'"></cn-svg>
    </div>
    <div class="main-btn" style="margin-left: 80px; margin-top: 120px;">
      <div v-for="item in btns" :key="item.name" style="margin-top: 90px;">
        <div class="btn menu-btn" @click="goto(item.path)" style="display: flex;align-items: center;">
          <!-- <svg style="height: 60px; width: 270px" viewBoxs="0 0 100 100">
            <defs>
              <linearGradient
                id="SVGID_1_"
                gradientUnits="userSpaceOnUse"
                x1="0"
                y1="0"
                x2="0"
                y2="90"
              >
                <stop offset="0" style="stop-color: #ffffff" />
                <stop offset="0.9" style="stop-color: #6bdbfa" />
                <stop offset="1" style="stop-color: #6bdbfa" />
              </linearGradient>
            </defs>
            <text
              style="fill: url(#SVGID_1_); font-size: 26px; font-weight: bolder"
              text-anchor="middle"
              x="50%"
              y="50%"
            >
              {{ item.name }}
            </text>
          </svg> -->
          <cn-svg :viewbox="'0 0 100 100'" :svgstyle="'height: 100px; width: 400px'" v-bind:textname="item.name"></cn-svg>
        </div>
      </div>
    </div>
    <div
      style="
        position: absolute;
        top: 25%;
        left: 35%;
        right: 2%;
        bottom: 8%;
      "
    >
      <div
        class="click-box"
        style="left: 25.71%; top: 18.89%"
        @click="goto('/jiance')"
      ></div>
      <div
        class="click-box"
        style="left: 49.21%; top: 37.61%"
        @click="goto('/jiance')"
      ></div>
      <div
        class="click-box"
        style="left: 32.22%; top: 63.1%"
        @click="goto('/jiance')"
      ></div>
      <div
        class="click-box"
        style="left: 62.58%; top: 63.1%"
        @click="goto('/jiance')"
      ></div>
      <div
        class="click-box"
        style="left: 85.14%; top: 37.61%"
        @click="goto('/jiance')"
      ></div>
      <img style="width: 100%; height: 100%" src="/chuneng/img/idx-right.png" />
    </div>
  </div>
</template>

<script>
import cnSvg from "./cn-svg.vue";
export default {
  components: { cnSvg },
  name: "Index",
  data() {
    return {
      btns: [
        {
          name: "储能健康评估",
          path: "/ztpg",
        },
        {
          name: "运检策略生成",
          path: "/yunjian",
        },
      ],
    };
  },
  methods: {
    goto(p) {
      this.$router.push({ path: p });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.click-box {
  height: 9.61%;
  width: 5%;
  background: transparent;
  position: absolute;
  cursor: pointer;
}
</style>
